<template>
	<view>
		<!-- 商品列表区域 -->
		<view class="Box">
			<view v-for="(item,i) in godsList" :key="i" @click="gotoDetail(item)">
				<my-goods :goods="item"></my-goods>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 请求参数对象
				queryobj:{
					// 查询关键词
					query:'',
					// 商品分类
					cid:'',
					// 页码值
					pagenum:1,
					// 每页显示多少条数据
					pagesize:12
				},
				// 商品列表的数据
				godsList:[],
				// 总数量,用来实现分页
				total:0,
				// 节流阀
				tf:true
			};
		},
	// 页面加载生命周期函数
	onLoad(options) {
		
		this.queryobj.query = options.query || ''
		this.queryobj.cid = options.cid || ''
		console.log('加载...',this.queryobj);
		
		// 调用获取商品列表数据的方法
		this.getGoodsList()
	},
	// 存储方法
	methods:{
		// 请求商品列表的方法
		async getGoodsList(cd){
			// 关闭节流阀
			this.tf=false
			// 发起请求
			const {data:s} =await uni.$http.get('/api/public/v1/goods/search',this.queryobj)
			cd && cd()
			if(s.meta.status !== 200) return uni.$showMsg()
			
			// 打开节流阀
			this.tf=true
			// 为数据赋值
			console.log(s);
			this.godsList = [...this.godsList,...s.message.goods]
			this.total = s.message.total
			console.log(this.godsList);
		},
		// 跳转商品详情的方法
		gotoDetail(item){
			uni.navigateTo({
				url:"../goods_detail/goods_detail?goods_id="+item.goods_id
			})
		}
	},
	// 下拉触底事件
	onReachBottom(){
		if(!this.tf) return
		if(this.queryobj.pagenum*this.queryobj.pagesize >=this.total) return uni.$showMsg('页面加载完毕')
		// 页面加一
		this.queryobj.pagenum++
		// 重新加载商品数据
		this.getGoodsList()
	},
	// 上拉刷新事件
	onPullDownRefresh() {
		// 重置参数
		this.queryobj.pagenum =1
		this.godsList=[]
		this.total=0
		this.tf=true
		// 重新调用请求商品数据方法
		this.getGoodsList(()=> uni.stopPullDownRefresh())
	}
	}
</script>

<style lang="scss">
	.Box{
		padding: 5px 7px;
		
	}
</style>
